<template>
  <div id="app" class="df fd ac">
    <!-- 头部 -->
    <div class="header">
      <h1>
        <img @click="back" class="left-arrows" src="../../../assets/img/home-img/left-arrows.png" alt="">
        汽车保养
      </h1>
    </div>
    <!-- map -->
    <div class="box">
      <div class="map" id="map1"></div>
    </div>
    <!-- 门店 -->
    <div class="footer text">
      <div class="mb20 df j-b ac">
        <p class="f30">{{ merchant.name }}</p>
        <span class="f16 f20" style="color:#277AF5;">{{ merchant.distance }}m</span>
      </div>
      <div class="df j-b ac mb40 f20" style="height:120rem;">
        <div style="flex:1;">
          <div class="block">
            <van-icon name="star" color="#FFC100" size="15" v-for="(el, index) in merchant.grade"
              style="margin-right: 5rem;" :key="index" />
            {{ merchant.grade + '分' }}
          </div>
          <p class="mt30 mb25"><span>营业时间：</span><span>{{ merchant.week }} {{ merchant.time }}</span></p>
          <p><span>位置：</span><span>{{ merchant.address }}</span></p>
        </div>
        <img :src="merchant.url" style="height:120rem;width:186rem;" alt="">
      </div>
      <div class="df j-b ac shop">
        <button @click="control = !control">
          <img class="" src="../../../assets/img/maintain/phone.png" alt="">
          联系门店
        </button>
        <button @click="shop">
          <img src="../../../assets/img/maintain/time.png" alt="">
          立即预约
        </button>
      </div>
    </div>
    <!-- 联系门店 -->
    <div class="w100 contact" v-if="control">
      <p class="h100 f25 tc lh100">{{ merchant.tel }}</p>
      <hr>
      <p class="h100 f25 tc lh100" @click="control = !control">复制</p>
      <hr style="height: 4rem;">
      <p class="h100 f25 tc lh100" @click="control = !control">取消拨号</p>
    </div>
    <!-- 蒙板 -->
    <div class="mask" v-if="control"></div>
  </div>
</template>

<script>
import { shopAll } from '@/api/maintain'
export default {
  mounted() {
    const that = this
    var map = new BMapGL.Map("map1");    // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(113.56242682268147, 34.81307996499919), 11);  // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

    var point = new BMapGL.Point(113.56242682268147, 34.81307996499919);
    var marker = new BMapGL.Marker(point);        // 创建标注
    var myIcon = new BMapGL.Icon(require("@/assets/img/maintain/location.png"), new BMapGL.Size(20, 60));
    // 创建标注对象并添加到地图  
    var marker = new BMapGL.Marker(point, { icon: myIcon });
    map.addOverlay(marker);// 将标注添加到地图中

    // 自定义展示内容
    function createDOM() {
      var div = document.createElement('div');
      div.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
      // div.style.backgroundColor = 'black';
      div.style.color = 'black';
      div.style.height = '42rem';
      div.style.width = '142rem';
      div.style.lineHeight = '42rem';
      div.style.whiteSpace = 'nowrap';
      div.style.MozUserSelect = 'none';
      div.style.fontSize = '20rem';
      div.style.borderRadius = '50rem';
      div.style.alignItems = 'center';

      var span = document.createElement('span');
      span.style.lineHeight = '16px';
      span.style.whiteSpace = 'normal';
      span.style.position = 'absolute'
      span.style.top = '-100rem'
      span.style.left = '22rem'
      span.style.color = 'white';
      div.appendChild(span);
      span.appendChild(document.createTextNode(this.properties.text));

      let img = document.createElement('img');
      img.style.width = '100%';
      img.style.position = 'absolute'
      img.style.top = '-110rem'
      img.style.left = '0'
      img.style.zIndex= '-1'
      img.src = this.properties.imgSrc;
      div.appendChild(img);

      return div;
    }
    // 创建自定义覆盖物
    var customOverlay = new BMapGL.CustomOverlay(createDOM, {
      point: new BMapGL.Point(113.56242682268147, 34.81307996499919),
      opacity: 0.5,
      offsetY: -10,
      properties: {
        text: '附近车店 >',
        imgSrc: require('@/assets/img/maintain/nearby-stores.png')
      }
    });
    map.addOverlay(customOverlay);
    customOverlay.addEventListener('click', function (e) {
      that.$router.push({
        path: '/upNearby'
      })
    });

    // 接口赋值
    shopAll({
    }).then(r => {
      console.log(r);
      this.merchant.name = r.data[17].name
      this.merchant.address = r.data[17].address
      this.merchant.grade = r.data[17].star
      this.merchant.url = r.data[17].gatePicture
      this.merchant.tel = r.data[17].tel
    })
  },
  methods: {
    back() {
      this.$router.push({
        path: '/home',// 商店详情
      })
    },
    shop() {
      this.$router.push({
        path: '/upWash',
        query: {
          merchant: this.merchant
        }// 商店详情
      })
    }
  },
  data() {
    return {
      control: false,
      merchant: {
        name: '车百事汽车生活馆', // 名字
        week: '周一至周五',// 星期
        time: '早上8:00-晚上22:00', // 当天营业时间
        address: '山阳区人民路与解放路交叉口', // 地址
        distance: 915, // 距离
        grade: 3, // 分数
        url: require('../../../assets/img/home-img/mine.png'),// 头像
        tel: 15113478,
      }
    }
  }
}
</script>

<style scoped>
.mask {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 0;
  z-index: 15;
}

.contact p {
  background-color: #FFFFFF;
}

.contact p:nth-child(1) {
  border-radius: 15rem 15rem 0 0;
}

.contact {
  position: fixed;
  bottom: 0;
  z-index: 20;
  background-color: #F2F2F2;
  border-radius: 15rem 15rem 0 0;
}

.h100 {
  height: 100rem;
}

.lh100 {
  line-height: 100rem;
}

.shop button:nth-child(1) {
  background-image: linear-gradient(to right, #3789FF, #0662E6);
}

.shop button:nth-child(2) {
  background-image: linear-gradient(to right, #FF7438, #FF4000);
}

.shop button {
  width: 287rem;
  height: 70rem;
  border-radius: 50rem;
  border: none;
  font-size: 25rem;
  color: white;
  position: relative;
}

.shop button img {
  width: 28rem;
  height: 25rem;
  position: absolute;
  left: 50rem;
  top: 23rem;
}

.footer {
  position: fixed;
  bottom: 0;
  height: 360rem;
  width: 100%;
  z-index: 10;
  padding: 45rem 45rem 0;
  box-sizing: border-box;
  background-color: #FFFFFF;
}

.map {
  height: 810rem;
}

.df {
  display: flex !important;
}

.fd {
  flex-direction: column !important;
}

.jc {
  justify-content: center !important;
}

.ac {
  align-items: center !important;
}

.j-a {
  justify-content: space-around !important;
}

.j-b {
  justify-content: space-between !important;
}

.left-arrows {
  height: 40rem;
  position: absolute;
  left: 24rem;
}

.header {
  position: absolute;
  width: 100%;
  height: 436rem;
  z-index: 0;
  background-image: url('../../../assets/img/home-img/bg.png');
  background-size: 100%;
  top: 0rem;
}

.header h1 {
  text-align: center;
  font-size: 36rem;
  color: white;
  margin: 70rem 0 48rem;
}

.box {
  background-color: white;
  border-radius: 15rem;
  padding: 32rem;
  width: 92%;
  box-sizing: border-box;
  margin-top: 18rem;
  z-index: 1;
}

#app {
  background-color: #F7F7F7;
  padding: 148rem 0 170rem;
}
</style>